<script setup lang="ts">
import { useTableData } from './composable'
import type { CustomDialogInstance } from '@/types'
import type { GatewayInfo } from '../../composable'

defineOptions({ name: 'IndicatorsModal' })
const props = defineProps<{
  info: GatewayInfo
}>()
const dialogRef = ref<CustomDialogInstance>()
const measuringToolNumber = ref()
const { loading, tableData, columns, toolsList, pagination, getLists, getToolsList } = useTableData()
function open() {
  measuringToolNumber.value = undefined
  getToolsList(props.info.id)
  clickSearch()
  dialogRef.value?.open()
}
function close() {
  dialogRef.value?.close()
}

function getTableData() {
  getLists({
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    measuringToolNumber: measuringToolNumber.value,
    gatewayId: props.info.id,
  })
}

async function clickSearch() {
  pagination.pageNumber = 1
  await nextTick()
  getTableData()
}

watch(
  () => measuringToolNumber.value,
  () => {
    clickSearch()
  },
)

defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    title="查看关联测点"
    :no-max-height="true" :show-confirm-button="false"
    cancel-button-text="关闭"
  >
    <div class="flex flex-col">
      <TableLists :loading="loading" :lists="tableData" :columns="columns" height="380px">
        <template #actions>
          <div class="flex items-center !mb-3">
            <span>网关编号：</span>
            <span class="break-all">{{ info.gatewayNumber }}</span>
            <span class="ml-3">网关名称：</span>
            <span class="break-all">{{ info.gatewayName }}</span>
            <span class="ml-3">测点数量：</span>
            <span class="break-all">{{ info.gatewayCollectPointNumber }}</span>
            <span class="ml-auto">计量器具：</span>
            <ElSelect v-model="measuringToolNumber" clearable class="!w-200px">
              <ElOption v-for="item in toolsList" :key="item.value" :label="item.name" :value="item.value">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
                  {{ item.code }}
                </span>
              </ElOption>
            </ElSelect>
          </div>
        </template>
      </TableLists>
      <div class="mt-3 self-end">
        <ElPagination
          v-model:current-page="pagination.pageNumber"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          background
          layout="total, prev, pager, next"
          @change="getTableData"
        />
      </div>
    </div>
  </CustomDialog>
</template>
